<template>
  <Modal
    title="分配班级"
    :value="value"
    :mask-closable="true"
    :footer-hide="true"
    @input="$emit('input', $event)"
  >
    <Form
      ref="formTeacherClass"
      :model="formTeacherClass"
      label-position="right"
      :label-width="80"
    >
      <!--<FormItem label="测试查看id" prop="id">-->
        <!--<Input type="text" readonly="readonly" v-model="formTeacherClass.id" placeholder="姓名"/>-->
      <!--</FormItem>-->
      <FormItem label="姓名" prop="name">
        <Input type="text" readonly="readonly" v-model="formTeacherClass.name" placeholder="姓名"/>
      </FormItem>
      <FormItem label="工号" prop="job_number">
        <Input type="text" readonly="readonly" v-model="formTeacherClass.job_number" placeholder="工号"/>
      </FormItem>
      <FormItem label="所属学院" prop="name1">
        <Select v-model="coid" style="width:200px"  @on-open-change="onOpenChangeCollege" @on-change="onOpenChangeMajor"  >
          <Option v-for="item in collegeList" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="所属专业" prop="name2">
        <Select v-model="mid" style="width:200px"  @on-change="onOpenFindClassByMid"  >
          <Option v-for="item in majorList" :value="item.id" :key="item.id">
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="所属班级" prop="name3">
        <Select v-model="classTeacherList" multiple style="width:200px" clearable >
          <!--@click.native="choice(item)"-->
          <Option v-for="item in classList" :value="item.id" :key="item.id" >
            {{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <!--老师下方班级   班级id-->
      <FormItem label="已分配班级" prop="name4">
        <strong v-for="item in selectClassByTidList">
            <span>【{{item.name3}}-{{item.name2}}-{{item.name1}}】</span>
        </strong>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit">提交</Button>
        <Button @click="handleReset" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>
  </Modal>
</template>
<script>
import {coverFormProps} from '@/libs/util'
// 学院查询、专业查询
import {queryAll} from '@/api/lky/lkyCollege'
import {queryAllM} from '@/api/lky/lkyMajor'
import {queryFindClassByMid, queryFindClassMajorCollegeListByTid, saveSC} from '@/api/lky/lkyClass'
import {selectClassByTid} from '@/api/lky/lkyTeacherClass'

export default {
  // 页面名称
  name: 'AddClass',
  // 子组件接收
  props: {
    value: {
      type: Boolean,
      default: false
    },
    lkyTeacher: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      coid: '',
      mid: '',
      collegeList: [],
      majorList: [],
      classList: [],
      // 已选中的班级
      classTeacherList: [],
      // 判断后存放
      classTeacherList1: [],
      // 原先已选中的班级
      selectClassByTidList: [],
      // 存放老师id，班级ids
      formTeacherClass: {
        id: ''
      },
      flag: true
    }
  },
  methods: {
    onOpenChangeCollege () {
      queryAll().then(res => {
        this.collegeList = res.data
      })
    },
    onOpenChangeMajor () {
      queryAllM({'coid': this.coid}).then(res => {
        this.majorList = JSON.parse(JSON.stringify(res.data))
      })
    },
    onOpenFindClassByMid () {
      queryFindClassByMid({'mid': this.mid}).then(res => {
        this.classList = JSON.parse(JSON.stringify(res.data))
      })
    },
    handleSubmit (name) {
      // 选中班级
      let arrList = this.classTeacherList
      // 已分配到班级
      let arrList1 = this.selectClassByTidList
      // this.classTeacherList1
      for (let i = 0; i < arrList.length; i++) {
        for (let j = 0; j < arrList1.length; j++) {
          // 如果存在重复添加，则将flag设置为false
          if (arrList1[j].cid === arrList[i]) {
            this.flag = false
          }
        }
        if (this.flag) {
          this.classTeacherList1.push(arrList[i])
        }
        this.flag = true
      }
      console.log('this.classTeacherList1.length===' + this.classTeacherList1.length)
      if (this.classTeacherList1.length > 0) {
        var obj = {}
        obj.classTeacherList = this.classTeacherList1
        obj.tid = this.formTeacherClass.id
        saveSC(obj).then(
          res => {
            // this.$emit('addRow', res.row)
            this.$emit('input', false)
            this.handleReset()
          })
      } else {
        this.$emit('input', false)
        this.handleReset()
      }
    },
    handleReset () {
      this.coid = ''
      this.mid = ''
      // this.selectClassByTidList = []
      this.classTeacherList = []
      this.classTeacherList1 = []
    },
    // 查询班级列表
    queryFindClassMajorCollegeListByTid (tid) {
      queryFindClassMajorCollegeListByTid({'tid': this.formTeacherClass.id}).then(res => {
        this.classTeacherList = JSON.parse(JSON.stringify(res.data))
      })
    },
    // 查询老师原已选中班级列表
    onOpenClassByTid () {
      selectClassByTid({'tid': this.formTeacherClass.id}).then(res => {
        this.selectClassByTidList = JSON.parse(JSON.stringify(res.data))
      })
    }
  },
  watch: {
    value: function (val, oldVal) {
      this.$refs.formTeacherClass.resetFields()
      coverFormProps(this.formTeacherClass, this.lkyTeacher)
      this.onOpenClassByTid()
    },
    // 获取学院id
    lkyTeacher(n){
      if(n!=null){
        // this.coid = n.id2
        // this.formLkyClass.mid = n.mid
        // this.onOpenChangeMajor()
      }
    }
  }
}
</script>
<!--
  1.查询数据
  2.学院、专业、班级
  3.将返回的班级id，一次保存到 班级-老师关联表
  4.后端接收保存
-->
